<%@page import="com.dingpeikeji.quickdeer.modules.rentproduct.entity.TDemands"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<jsp:include page="/WEB-INF/views/layouts/head.jsp"></jsp:include>
<c:set var="REACTSTATUS_WAIT" value="<%=TDemands.REACTSTATUS_WAIT %>" />
<c:set var="REACTSTATUS_DONE" value="<%=TDemands.REACTSTATUS_DONE %>" />
<c:set var="REACTSTATUS_SURE" value="<%=TDemands.REACTSTATUS_SURE %>" />
<c:set var="REACTSTATUS_CANCEL" value="<%=TDemands.REACTSTATUS_CANCEL %>" />
<html>
<head>
<title>定制包车</title>
<link href="${ctxStatic }/xiake/css/list.css" rel='stylesheet'type='text/css' />
<link href="${ctxStatic }/xiake/css/style.css" rel='stylesheet'type='text/css' />
<link href="${ctxStatic }/index/css/customized.css" rel="stylesheet">
<link href="${ctxStatic }/cityselector/cityselect.css" rel='stylesheet'type='text/css' />
<script src="${ctxStatic }/index/js/customized.js"></script>
<script src="${ctxStatic}/form-validate/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
//百度地图API功能
function G(id) {
	return document.getElementById(id);
}
var map = new BMap.Map("l-map");
var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
	{"input" : "suggestId"
	,"location" : map
});
ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
var str = "";
	var _value = e.fromitem.value;
	var value = "";
	if (e.fromitem.index > -1) {
		value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
	}    
	str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
	value = "";
	if (e.toitem.index > -1) {
		_value = e.toitem.value;
		value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
	}    
	str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
	G("searchResultPanel").innerHTML = str;
});
var myValue;
ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
var _value = e.item.value;
	myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
	G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
	setPlace();
	// 选中详细地址后，调用百度地图获取 云地理编码 
	var address = encodeURIComponent(myValue);
	$.getJSON(
			"https://api.map.baidu.com/cloudgc/v1?ak=kOQ8j9rd2ATw2R54boLMFUalu3gGNGDO&s=1&address="+address+"&callback=?",
			function(data){
			if(data.status == 0 && data.result.length>0 ){
				$('#departcityName').val(data.result[0].address_components.city);
				var $sitename = $('#departcityName').val();
				$.post("${ctxFront}/sms/getSiteId","sitename="+$sitename,function(d){
					if(d!=null&&d!=''){
						$("#siteid").val(d);
					}else{
						$("#siteid").val("");
					}
				});
			}
		});
});
function setPlace(){
	map.clearOverlays();    //清除地图上所有覆盖物
	function myFun(){
		var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
		map.centerAndZoom(pp, 18);
		map.addOverlay(new BMap.Marker(pp));    //添加标注
	}
	var local = new BMap.LocalSearch(map, { //智能搜索
	  onSearchComplete: myFun
	});
	local.search(myValue);
}

</script>
<script type="text/javascript">
var yes = "${fns:getDictValue('是','yes_no','')}"; // 字典yes_no的“是”
$(function(){
	// 初始化站点选择框
	$.post('${ctxFront}/info/site/siteJson',{spottypes:'0'}, function(data) {
		var allCity = data;//['北京市#001#1|beijing|bj','上海市#002#0|shanghai|sh'];
		new Vcity.CitySelector({input:'departcityName',cityData:allCity});
		new Vcity.CitySelector({input:'destcityName',cityData:allCity});
	});
	$('input[name=ispublic]').trigger('change');
	<c:if test="${not empty tDemands.demandid }">
		$('input').attr('disabled','disabled');
		$('textarea').attr('disabled','disabled');
		$('select').attr('disabled','disabled');
	</c:if>
	var keyVal= "${message}";
	if(keyVal.length!=0){ 
		if(keyVal=='success'){
			$("#mes").show(); 
		}else{
			alert(keyVal);
		}
		
	}  
	$("#form").click(function(){
		window.location.href = "${ctxFront }/rentproduct/demands/form";
	})
	$("#list").click(function(){
		window.location.href = "${ctxFront }/rentproduct/demands";
	})
	$("#departcityName").click(function(){
		$("#suggestId").val("");
	})
	$("#btn").click(function(){
		$value = $('#siteid').val();
		$.post("${ctxFront}/sms/checkSiteid","siteid="+$value,function(d){
			if(d==1){
				alert("暂不支持此地区定制包车业务,请重新填写");
				return false;
			}else{
				$("#saveForm").submit();
			}
		});
		
	})
	$("#saveForm").validate({
		rules: {
			"departcity.sitename": "required",
			"destcity.sitename": {
				required: true,
			},
			"cartype.cargotypeid":{
				required:true,
			},
			vehiclenum:{
				required:true,
			},
			sendAddress:{
				required:true,
			},
			fromdate:{
				required:true,
			},
			rentdays:{
				required:true,
			},
			contactor:{
				required:true,
			},
			contactphone:{
				required:true,
				isMobile : true
			}
		},
		messages: {
			"departcity.sitename": "",
			"destcity.sitename": {
				required: "",
			},
			"departcity.siteid":{
				required: true,
			},
			vehiclenum: {
				required: ""
			},
			sendAddress: {
				required: ""
			},
			fromdate: {
				required: ""
			},
			rentdays: {
				required: ""
			},
			contactor: {
				required: ""
			},
			contactphone: {
				required: "",
				isMobile : "<font color='red'>非法</font>"
			}
		}
	});
        jQuery.validator.addMethod("isMobile", function(value, element) {
            var length = value.length;
            var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "请正确填写您的手机号码");
});
</script>
</head>
<body>
	<input type="hidden" id="menuInfo" value="indexDemands">
	<div class="custcar">
    <div class="container">

        <ul class="tabs" style="float: left">
            <li><a href="#tab1" id="form">定制包车</a></li>
            <li><a href="#tab2" id="list">我的需求</a></li>

        </ul>

        <div class="table_container">
            <div id="tab1" class="tab_content" style="float: right">
            <form id="saveForm" action="${ctxFront }/rentproduct/demands/save" method="post">
<div class="chart-infor" style="float: left" >
    <dl>
        <dd class="vehicle-time">
            <span class="vehicle-time-1">用车时间&nbsp;:&nbsp;</span>
            <input id="fromdate" name="fromdate" type="text" readonly="readonly" maxlength="20" class="Wdate"
			style="min-width:303px;height:30px;" value="<fmt:formatDate value="${tDemands.fromdate}" pattern="yyyy-MM-dd HH:mm"/>"
			onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',isShowClear:false,minDate:'%y-%M-%d'});"/>
			<span><font color='red'>*</font></span>
        </dd>
        <dd class="car-selection">
            <span class="car-selectio-1">包车天数&nbsp;:&nbsp;</span>
            <input type="number" id="rentdays" name="rentdays" class="integer" min="1" value="1"/>
            <span><font color='red'>*</font></span>
        </dd>
        <dd class="car-selection">
            <span class="car-selectio-1">选择车型&nbsp;:&nbsp;</span>
			<select name="cartype.cargotypeid" style="min-width:303px;height:30px;">
			<c:forEach items="${cargotypeList }" var="cargotype">
				<option value="${cargotype.cargotypeid }" >${cargotype.typename }</option>
			</c:forEach>
			</select>
			 <span><font color='red'>*</font></span>
        </dd>
        <dd class="car-selection">
            <span class="car-selectio-1">包车数量&nbsp;:&nbsp;</span>
           <input type="number" id="vehiclenum" name="vehiclenum" class="integer" min="1" value="1"/>
            <span><font color='red'>*</font></span>
        </dd>
    </dl>

    <div id="remarks">
        <dl>
            <dd class="remarks">
                <span class="remarks_1">行程备注</span>
            </dd>
        </dl>
        <div class="border-b"></div>
        
        <dl>
            <dd class="aboard" >
                <span class="aboard_1">上车地点&nbsp;:&nbsp;</span>
				<input type="text" class="changz" id="departcityName" 
				name="departcity.sitename" value="${tDemands.departcity.sitename }" placeholder="选择城市"
				autocomplete="off" >
				<input type="hidden" name="departcity.siteid" value="${tDemands.departcity.siteid }" id="siteid">
				<input type="text" class="address" id="suggestId" name="sendAddress" placeholder="第一天上车地点" required="required" value="${tDemands.sendAddress}" />
				<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
				 <span><font color='red'>*</font></span>
            </dd>
            <dd class="destination">
                 <span class="destination_1">目的地&nbsp;:&nbsp;</span>
                 <input type="text" id="destcityName" name="destcity.sitename" value="${tDemands.destcity.sitename }" autocomplete="off" placeholder="请输入目的地">
			<input type="hidden" name="destcity.siteid" value="${tDemands.destcity.siteid }">
			     <span><font color='red'>*</font></span>
            </dd>
            <dd class="beizhu">
                 <span class="beizhu_1">行程备注&nbsp;:&nbsp;</span>
                <textarea placeholder="请填写每日详细行程（途径城市、景点等），以便车队精准合理报价" id="modeldesc" name="modeldesc"></textarea>
            </dd>
        </dl>
    </div>

    <div>
        <dl>
            <dd class="linkman">
                <span class="linkman_1">联系人&nbsp;:&nbsp;</span>
                <input type="text" id="contactor" name="contactor" value="${tDemands.contactor}" placeholder="联系人姓名"/>
                 <span><font color='red'>*</font></span>
            </dd>
            <dd class="linknumber">
                <span class="linknumber_1">联系电话&nbsp;:&nbsp;</span>
                <input type="text" id="contactphone" name="contactphone" value="${sessionScope.front_user.mobile}" placeholder="输入电话号码"/>
                 <span><font color='red'>*</font></span>
            </dd>
        </dl>
        <c:if test="${not empty reactList }">
			<div style="height:auto;margin:0;padding:0;overflow:hidden;border-width:1px 1px 1px 1px;border-style:solid;border-color:#daf3ff">
				<table style="width:100%;">
					<tr style="background:#daf3ff">
						<th style="text-align:center;width:15%">名称</th>
						<th style="text-align:center;width:15%">总价</th>
						<th style="text-align:center;width:30%">车辆备注</th>
						<th style="text-align:center;width:20%">响应时间</th>
						<th style="text-align:center;width:20%">操作</th>
					</tr>
					<c:forEach items="${reactList }" var="react">
						<tr>
							<td style="text-align:center;">${react.office.abbr }</td>
							<td style="text-align:center;">${react.price }</td>
							<td style="text-align:center;">${react.remarks }</td>
							<td style="text-align:center;"><fmt:formatDate value="${react.createDate}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
							<td style="text-align:center;">
								<c:if test="${tDemands.reactstatus ne REACTSTATUS_DONE and tDemands.reactstatus ne REACTSTATUS_CANCEL }">
									<a href="${ctxFront }/rentproduct/demands/book?reactid=${react.reactid}&demandid=${tDemands.demandid}" class="container_table_y2 pointer" style="width:100px;">确认支付</a>
								</c:if>
							</td>
						</tr>
					</c:forEach>
				</table>
			</div>
		</c:if>
        <div class="submit">
            <c:if test="${empty tDemands.demandid }">
				 <input type="button" value="提交" id="btn">
			</c:if>
        </div>
    </div>
</div>
       </form>
                <div class="flow" style="float: right">
                    <h4 class="flow_1">定制包车发布流程&nbsp;:</h4>
                    <div>
                        <h5 class="release">发布需求</h5>
                        <h5 class="release_1">填写详细用车需求</h5>
                        <img class="zhifeiji" src="${ctxStatic }/index/images/zhifeiji.png">
                    </div>
                    <img class="jiantou" src="${ctxStatic }/index/images/jiantou.png">
                    <div class="fankui">
                        <h5>等候报价</h5>
                        <h5>5-10分钟后客运公司报价反馈</h5>
                        <img class="baojia" src="${ctxStatic }/index/images/baojia.png">
                    </div>
                    <img class="jiantou_2" src="${ctxStatic }/index/images/jiantou2.png">
                    <div class="offer">

                        <h5 class="offer_1">价格核对</h5>
                        <h5 class="offer_2">在我的需求中查看报价</h5>
                        <img class="jiage" src="${ctxStatic }/index/images/jiage.png">
                    </div>
                    <img class="jiantou_1" src="${ctxStatic }/index/images/jiantou.png">
                    <div class="payment">
                        <h5>完成支付</h5>
                        <h5>微信或支付宝进行支付</h5>
                        <img class="queding" src="${ctxStatic }/index/images/queding.png">
                    </div>
                </div>

</div>
        </div>

    </div>
</div>
<div id="mes">
    <div class="hidden_box">
        <p class="hidden_tit">
            <span></span>
            <span>提交成功</span>
        </p>
        <p>正在对您的需求进行报价，请耐心等候，为保证您的顺利用车，获得报价响应后请尽快确认支付。</p>
        <p>
            <a href="${ctxFront }/rentproduct/demands/list" id="sure">确定</a>
        </p>
    </div>
</div>
</body>
</html>
<%@ include file="/WEB-INF/views/layouts/foot.jsp"%>